<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<title>在线测验系统</title>
	<meta name="viewport"
		content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<link rel="stylesheet" th:href="@{/plug/element-ui/theme-chalk/index.css}" />
	<link rel="stylesheet" th:href="@{/plug/vant/lib/index.css}" />
	<link rel="stylesheet" th:href="@{/css/index.css}" />
	<script th:src="@{/plug/vue/vue.js}"></script>
	<script th:src="@{/plug/axios/axios.min.js}"></script>
	<script th:src="@{/plug/axios/request.js}"></script>
	<script th:src="@{/plug/element-ui/index.js}"></script>
	<script th:src="@{/plug/vant/lib/vant.min.js}"></script>
	<script th:src="@{/js/index.js}"></script>
	<style>
		.answer-group {
			padding: 0 16px;
		}

		.answer-group .van-radio {
			margin-bottom: 8px;
		}
	</style>
</head>

<body>
	<div id="mainApp">
		<van-row>
			<van-nav-bar :title="chapter?.chapterTitle" left-arrow @click-left="onReback()">
				<template #left>
					<van-icon name="arrow-left" />
				</template>
				<template #right>

				</template>
			</van-nav-bar>
		</van-row>
		<van-row style="margin-bottom: 35px;">
			<van-panel status="状态">
				<template #header >
					<van-row  v-show="chapter?.chapterType*1 == 1">
						<van-cell class="my-circle">
							<van-circle v-model="currentRate" layer-color="#ebedf0" :text="rateText" >
								
							</van-circle>
						</van-cell>
					</van-row>
					<van-row style="background-color: rgb(240, 240, 240);"  v-show="chapter?.chapterType*1 == 1">
						<van-col span="12" class="center-text">
							<p v-show="record !== null && record?.recordRight > 0">
								{{rightRate}}%</p>
							<p v-show="record !== null && record?.recordRight == 0 && record?.recordStatus !== 2">-</p>
							<p v-show="record !== null && record?.recordRight == 0 && record?.recordStatus == 2">0%</p>
							<p v-show="record == null">-</p>
							<p>正确率</p>
						</van-col>
						<van-col span="12" class="center-text">
							<p>{{topics.length}}</p>
							<p>总分</p>
						</van-col>
					</van-row>
				</template>
				<template #default>
					<van-cell>
					<van-button plain hairline type="" size="mini">不可点击</van-button>
					<van-button plain hairline type="info" size="mini">未答题</van-button>
					<van-button plain hairline type="warning" size="mini">已答题</van-button>
					<van-button plain hairline type="primary" size="mini">正确</van-button>
					<van-button plain hairline type="danger" size="mini">错误</van-button>
					</van-cell>
					<van-cell>
						<van-grid :border="false" :column-num="7">
							<van-grid-item v-for="(topic, index) in topics">
								<van-button @click="toAnswer(index)" size="mini" :type="btnColor(topic)" plain
									round>
									{{index < 10 ?'&nbsp;' +(index+1)+'&nbsp;':(index+1)}} </van-button>
							</van-grid-item>
						</van-grid>
					</van-cell>
				</template>
				<template #footer>

				</template>
			</van-panel>
		</van-row>
		<van-tabbar active-color="#1989fa" inactive-color="#1989fa">
			<van-tabbar-item v-show="record != null && record.recordStatus*1 === 2" name="up" icon="font-o" @click="onAnalysis('')">全部解析</van-tabbar-item>
			<van-tabbar-item v-show="record != null && record.recordStatus*1 === 2" name="down" icon="todo-list-o" @click="onAnalysis('0')">错题解析</van-tabbar-item>
			<van-tabbar-item v-show="record != null" name="down" icon="replay" @click="onReplay">重做</van-tabbar-item>
			<!--<van-tabbar-item v-show="record == null" name="down" icon="clock-o" @click="onStart" >开始做题</van-tabbar-item>-->
			<van-tabbar-item v-show="record != null && record.recordStatus*1 !== 2" name="down" icon="clock-o" @click="submitRecord" >提交</van-tabbar-item>
		</van-tabbar>
	</div>
	<script type="text/javascript">
		const mainApp = {
			el: '#mainApp',
			data: {
				activeMenu: 'home',
				showPopover: false,
				currentRate: 0,
				recordSubmit: 0,
				totalRate: 0,
				rightRate: ' - ',
				recordId: '',
				chapter:null,
				topics: [],
				respInfo: null,
				record: null
			},
			mounted() {
				let that = this
				let rId = GetQueryString('rId')
				that.recordId = rId
				that.getRecord()
				//that.getChapter()
			},
			computed: {
				rateText() {
					let that = this
					if(!getLoginId() || !that.record){
						return '0/0'
					}
					return '已做'+that.recordSubmit+'题,共计'+that.topics.length+'题';
				},
			},
			methods: {
				toAnswer(index) {
					let that = this
					window.location.href = '/user/answer?rId=' + this.record.recordId + '&index=' + index
				},
				btnColor(topic) {
					let that = this
					if (!that.record) {
						return ''
					}
					if (that.record.chapter.chapterType*1 == 0) {
						if (!topic.resp) {
							return 'info'
						}
						return topic.resp.respResult*1 == 1?'primary':'danger'
					}
					if (that.record.recordStatus*1 == 2) {
						// 已经提交但是未答题
						if (!topic.resp) {
							return 'info'
						}
						// 如果已经结束，直接显示答案结果
						return topic.resp.respResult*1 == 1?'primary':'danger'
					}
					// 还没提交，如果答题了则显示颜色
					if(topic.resp){
						return 'warning'
					}
					return 'info';
				},
				onReback() {
					let that = this
					if(that.record.chapter.chapterType === 0){
						window.location.href = '/user/home'
					}else{
						that.$dialog.confirm({
						  title: '是否结束模拟',
						  message: '退出之后返回将重新模拟做题',
						  confirmButtonText: '确认'
						}).then(() => {
						  	window.location.href='/user/index'
						}).catch(() => {});
					}
				},
				onReplay() {
					let that = this
					this.$dialog.confirm({
						title: '是否重新做题',
						message: '点击确认后将清空当前答题记录',
						confirmButtonText: '确定重做'
					}).then(() => {
						const dd = {
							accountId: getLoginId(),
							recordId: that.recordId
						}
						postRequst('/user/reStartRecord', dd, true).then(function (resp) {
							if (resp.status === 0) {
								that.$toast.success(resp.msg);
								if(resp.data){
									that.recordId = resp.data.recordId
								}
								setTimeout(function () {
									window.location.href = '/user/answer?rId=' + that.recordId + '&index=0'
								}, 900)
							}
							that.$toast.fail(resp.msg);
						})
					}).catch(() => {
						
					});
				},
				onAnalysis(all) {
					if (!this.record) {
						this.$toast.fail('做题未开始');
						return false
					}
					if (this.record && this.record.recordStatus*1 !== 2) {
						this.$toast.fail('做题未结束');
						return false
					}
					window.location.href = '/user/wrong?rId=' + this.record.recordId + '&t=' + all
				},
				/**onStart() {
					let that = this
					if(!getLoginId()){
						that.$toast.fail('请登录');
						return false
					}
					that.$dialog.confirm({
						title: '是否开始做题',
						message: '点击确认后开始计时',
						confirmButtonText: '确定做题'
					})
						.then(() => {
							// on confirm
							that.saveRecord()
						})
						.catch(() => {
							// on cancel
						});
				},**/
				getRecord() {
					let that = this
					let url = '/user/getRecordVoById'
					const dd = {
						accountId: getLoginId(),
						recordId: that.recordId
					}
					postRequst(url, dd, true).then(function (resp) {
						that.record = resp.data
						if(resp.data){
							that.chapter = resp.data.chapter
							that.getTopics()
						}
					})
				},
				saveRecord() {
					let that = this
					const dd = {
						accountId: getLoginId(),
						recordId: that.recordId
					}
					let err = checkLogin(dd)
					if(err){
						that.$toast.fail(err);
						return false
					}
					postRequst('/user/saveRecord', dd, true).then(function (resp) {
						if (resp.status === 0) {
							that.$toast.success(resp.msg);
							setTimeout(function () {
								window.location.href = '/user/detail?rId=' + that.recordId
							}, 900)
						}
						that.$toast.fail(resp.msg);
					})
				},
				/**getChapter() {
					let that = this
					postRequst('/user/getChapter', {chapterId: that.chapterId}, true).then(function (resp) {
						that.chapter = resp
					})
				},**/
				getTopics() {
					let that = this
					const dd = {
						accountId: getLoginId(),
						chapterId: that.chapter.chapterId
					}
					postRequst('/user/getZTTopics', dd, true).then(function (resp) {
						that.topics = resp.rows
						let recordSubmit = 0, recordRight = 0;
						for (let t = 0; t < that.topics.length; t++) {
							if(that.topics[t].resp){
								recordSubmit = recordSubmit + 1
								if(that.topics[t].resp && that.topics[t].resp.respResult === 1){
									recordRight = recordRight + 1
								}
							}
						}
						that.currentRate = ((recordSubmit*1 / that.topics.length*1)*100).toFixed(0)*1
						that.recordSubmit = recordSubmit
						that.rightRate = ((recordRight*1 / that.topics.length*1)*100).toFixed(0)*1
					})
				},
				submitRecord() {
					let that = this
					let dd = {
						recordId: that.recordId,
						accountId: getLoginId()
					}
					this.$dialog.confirm({
					  title: '是否提交结果',
					  message: '点击确认后得出结果',
					  confirmButtonText: '确定提交'
					}).then(() => {
					   postRequst('/user/submitRecord', dd, true).then(function (resp) {
							if(resp.status === 0){
								that.$toast.success(resp.msg);
								setTimeout(function(){
									window.location.href='/user/detail?rId=' + that.recordId
								}, 900)
							}
							that.$toast.fail(resp.msg);
						})
					}).catch(() => {
					    // on cancel
					});
				},
			}
		}
		let vueData = {

		}
		let vueMethods = {

		}
		function vueCreated() {

		}
	</script>
	<script th:src="@{/js/VueCreate.js}"></script>
</body>

</html>